<!DOCTYPE html>
<html lang="{% block html_lang %}{{ DEFAULT_LANG }}{% endblock html_lang %}">
<head>
  {% block head %}
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
    <title>{% block title %}{{ SITENAME }}{% if SITESUBTITLE %} - {{ SITESUBTITLE }}{% endif %}{% endblock title %}</title>
    {% if FEED_ALL_ATOM %}
    <link href="{{ FEED_DOMAIN }}/{% if FEED_ALL_ATOM_URL %}{{ FEED_ALL_ATOM_URL }}{% else %}{{ FEED_ALL_ATOM }}{% endif %}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} Full Atom Feed" />
    {% endif %}
    {% if FEED_ALL_RSS %}
    <link href="{{ FEED_DOMAIN }}/{% if FEED_ALL_RSS_URL %}{{ FEED_ALL_RSS_URL }}{% else %}{{ FEED_ALL_RSS }}{% endif %}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} Full RSS Feed" />
    {% endif %}
    {% if FEED_ATOM %}
    <link href="{{ FEED_DOMAIN }}/{%if FEED_ATOM_URL %}{{ FEED_ATOM_URL }}{% else %}{{ FEED_ATOM }}{% endif %}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} Atom Feed" />
    {% endif %}
    {% if FEED_RSS %}
    <link href="{{ FEED_DOMAIN }}/{% if FEED_RSS_URL %}{{ FEED_RSS_URL }}{% else %}{{ FEED_RSS }}{% endif %}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} RSS Feed" />
    {% endif %}
    {% if CATEGORY_FEED_ATOM and category %}
    <link href="{{ FEED_DOMAIN }}/{% if CATEGORY_FEED_ATOM_URL %}{{ CATEGORY_FEED_ATOM_URL.format(slug=category.slug) }}{% else %}{{ CATEGORY_FEED_ATOM.format(slug=category.slug) }}{% endif %}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} Categories Atom Feed" />
    {% endif %}
    {% if CATEGORY_FEED_RSS and category %}
    <link href="{{ FEED_DOMAIN }}/{% if CATEGORY_FEED_RSS_URL %}{{ CATEGORY_FEED_RSS_URL.format(slug=category.slug) }}{% else %}{{ CATEGORY_FEED_RSS.format(slug=category.slug) }}{% endif %}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} Categories RSS Feed" />
    {% endif %}
    {% if TAG_FEED_ATOM and tag %}
    <link href="{{ FEED_DOMAIN }}/{% if TAG_FEED_ATOM_URL %}{{ TAG_FEED_ATOM_URL.format(slug=tag.slug) }}{% else %}{{ TAG_FEED_ATOM.format(slug=tag.slug) }}{% endif %}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} Tags Atom Feed" />
    {% endif %}
    {% if TAG_FEED_RSS and tag %}
    <link href="{{ FEED_DOMAIN }}/{% if TAG_FEED_RSS_URL %}{{ TAG_FEED_RSS_URL.format(slug=tag.slug) }}{% else %}{{ TAG_FEED_RSS.format(slug=tag.slug) }}{% endif %}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} Tags RSS Feed" />
    {% endif %}
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">
    <link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/material.blue_grey-red.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/pygment.css">
    <link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/style.css">
    <link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/tag_cloud.css">
    <link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/article_card.css">
    <link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/android_header.css">
    <link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/auto_hide_nav.css">
    {% block extra_css %}
    {% endblock %}
  {% endblock head %}
</head>

<body class="el-mdl">
  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
    
    <header class="android-header mdl-layout__header mdl-layout__header--waterfall cd-auto-hide-header">
      <div class="mdl-layout__header-row">

          <div class="android-title mdl-layout-title">
            {% if SITELOGO %}
            <img class="android-logo-image" src="{{ SITEURL }}/{{ SITELOGO }}">
            {% endif %}
            <span class="el-mdl-site-name el-mdl-logo-text">{{ SITENAME }}</span>
          </div>

          <div class="mdl-layout-spacer"></div>

          {% if TIPUE_SEARCH %}
          <div class="android-search-box mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right mdl-textfield--full-width">
            <form class="" action="/search.html" onsubmit="return validateForm(this.elements['q'].value);"> 
              <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
                <label class="mdl-button mdl-js-button mdl-button--icon" for="tipue_search_input">
                  <i class="material-icons">search</i>
                </label>
                <div class="mdl-textfield__expandable-holder">
                  <input class="mdl-textfield__input" type="text" name="q" id="tipue_search_input">
                  <label class="mdl-textfield__label" for="tipue_search_input">Enter your query...</label>
                </div>
              </div>
            </form>
          </div>
          {% endif %}

          <div class="android-navigation-container mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
            <nav class="android-navigation mdl-navigation mdl-tabs__tab-bar">
              <a class="mdl-navigation__link mdl-tabs__tab mdl-typography--body-1-force-preferred-font {% if output_file == 'index.html' %}is-active{% endif %}" href="/index.html">首页</a>
              {% if DISPLAY_CATEGORIES_ON_MENU %}
              {% for cat, null in categories %}
              <a class="mdl-navigation__link mdl-tabs__tab mdl-typography--body-1-force-preferred-font {% if cat == category %}is-active{% endif %}" href="{{ SITEURL }}/{{ cat.url }}">{{ cat }}</a>
              {% endfor %}
              {% endif %}
            </nav>
          </div>

          <span class="android-mobile-title mdl-layout-title">
            {% if SITELOGO %}
            <img class="android-logo-image" src="{{ SITEURL }}/{{ SITELOGO }}">
            {% endif %}
            <span class="el-mdl-site-name el-mdl-logo-text">{{ SITENAME }}</span>
          </span>

          <button class="android-more-button mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect" id="more-button">
              <i class="material-icons">more_vert</i>
            </button>
            <ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right mdl-js-ripple-effect" for="more-button">
              {% if DISPLAY_PAGES_ON_MENU %}
              {% for pg in pages %}
              <a href="{{ SITEURL }}/{{ pg.url }}"><li class="mdl-menu__item">{{ pg.title }}</li></a>
              {% endfor %}
              {% endif %}
              <a href="/tags.html"><li class="mdl-menu__item">TAG页面</li></a>
              <a href="/archives.html"><li class="mdl-menu__item">文章存档</li></a>
            </ul>

      </div>
    </header>

    <div class="android-drawer mdl-layout__drawer mdl-layout--small-screen-only">
      <span class="mdl-layout-title">
        {% if SITELOGO_WHITE %}
        <img class="android-logo-image" src="{{ SITEURL }}/{{ SITELOGO_WHITE }}">
        <span class="el-mdl-site-name el-mdl-logo-text-white">{{ SITENAME }}</span>
        {% endif %}
      </span>

      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="{{ SITEURL }}/">首页</a>
        {% for cat, null in categories %}
        <a class="mdl-navigation__link" href="{{ SITEURL }}/{{ cat.url }}">{{ cat }}</a>
        {% endfor %}
        <div class="android-drawer-separator"></div>
        {% for pg in pages %}
        <a class="mdl-navigation__link" href="{{ SITEURL }}/{{ pg.url }}">{{ pg.title }}</a>
        {% endfor %}
        <a class="mdl-navigation__link" href="/tags.html">TAG页面</a>
        <a class="mdl-navigation__link" href="/archives.html">文章存档</a>
      </nav>
    </div>

    <a name="top"></a>
    {% if BG_IMG %}
    <div class="el-mdl-bg-image" style="background-image: url({{ SITEURL }}/{{ BG_IMG }})"></div>
    {% endif %}
    <main class="mdl-layout__content" style="display: flex;flex-direction: column;">
      <div style="flex:1">
        <div class="mdl-grid el-mdl-max-width">
          <div class="mdl-card mdl-cell mdl-cell--9-col">
          {% block content %}
          {% endblock %}
          </div>

          <div class="el-sidebar mdl-card mdl-cell mdl-cell--9-col mdl-cell--3-col-desktop" id="right_sidebar">
          {% block sidebar_head %}
          {% endblock %}

          {% if TAG_CLOUD_STEPS %}
          <div class="el-tagcloud mdl-card mdl-cell mdl-cell--12-col">
              <div class="mdl-card__title mdl-card--border">
                  <h2 class="mdl-card__title-text">标签云</h2>
              </div>
              <div class="mdl-card__supporting-text">
                  {% include 'tag_cloud.html' %}
              </div>
          </div>
          {% endif %}



          {% block sidebar_foot %}
          {% endblock %}
          </div>
        </div>
      </div>

      <div class="page-footer">
        <footer class="el-footer mdl-mini-footer">
            <div class="mdl-mini-footer--left-section">
                <ul>
                    {% if TWITTER_URL %} <li class="el-social-btn"><i class="ello-icon"><a href="{{ TWITTER_URL }}" title="twitter">&#xf099;</a></i></li> {% endif %}
                    {% if FACEBOOK_URL %} <li class="el-social-btn"><i class="ello-icon"><a href="{{ FACEBOOK_URL }}" title="facebook">&#xf230;</a></i></li> {% endif %}
                    {% if GITHUB_URL %} <li class="el-social-btn"><i class="ello-icon"><a href="{{ GITHUB_URL }}" title="github">&#xf09b;</a></i></li> {% endif %}
                    {% if WEIBO_URL %} <li class="el-social-btn"><i class="ello-icon"><a href="{{ WEIBO_URL }}" title="weibo">&#xf18a;</a></i></li> {% endif %}
                    {% if WECHAT_URL %} <li class="el-social-btn"><i class="ello-icon"><a href="{{ WECHAT_URL }}" title="wechat">&#xf1d7;</a></i></li> {% endif %}
                    {% if LINKEDIN_URL %} <li class="el-social-btn"><i class="ello-icon"><a href="{{ LINKEDIN_URL }}" title="linkedin">&#xf30c;</a></i></li> {% endif %}
                  </ul>
              <div style="font-size: 0.5em;">
                © 2019 elvyn. <br />powered by 
                <a href="http://getpelican.com/" style="text-decoration: none;color: #ccc;">Pelican</a>
                , based on 
                <a href="http://python.org" style="text-decoration: none;color: #ccc;">Python</a>
                and 
                <a href="https://getmdl.io" style="text-decoration: none;color: #ccc;">mdl</a>
              </div>
            </div>
            <div class="mdl-mini-footer--middle-section">
              
            </div>
            <div class="mdl-mini-footer--right-section">
              <a href="#top">
                <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored mdl-shadow--4dp" id="el-icon-upward">
                  <i class="material-icons">arrow_upward</i>
                </button>
              </a>
            </div>
        </footer>
      </div>

    </main>

  </div>
  {% block script %}
  <script src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/js/jquery-3.0.0.min.js"></script>
  <script src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/js/auto_hide_nav.js"></script>
  <script src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/js/material.min.js"></script>
  <script>
    function validateForm(query)
    {
        return (query.length > 0);
    }
  </script>
  {% endblock script %}
  {% block extra_js %}
  {% endblock %}

  {% include 'analytics.html' %}
</body>
</html>
